<template>
    <div class="top">
        <h1 class="confirm">确认挂号信息</h1>
    </div>
    <!-- 中间 -->
    <div class="box_card">
        <el-card style="max-width: 100%">
            <template #header>
                <div class="card-header">
                    <h1>请选择就诊人</h1>
                    <el-button type="primary" @click="" icon="User">添加就诊人信息</el-button>
                </div>
            </template>
            <!-- 展示就诊人 -->
            <div class="cardBody">
                <el-card style="min-width: 30%;margin-top: 30px;" v-for="(item, index) in saveInfo"
                    @click="savePeo(item, index)" :index="index" :peo="peo">

                    <template #header>
                        <div class="card-header">
                            <!-- 左侧 -->
                            <div class="boxLeft">
                                <div class="boxCon">{{ item.isInsure == 1 ? "医保" : "自费" }}</div>
                                <div class="boxName">{{ item.name }}</div>
                            </div>
                            <!-- 右侧 -->
                            <div class="boxRight">
                                <el-button type="primary" @click="" circle icon="Edit"></el-button>
                            </div>
                        </div>
                    </template>
                    <div class="bottom">
                        <p>证件类型:{{ item.param.certificatesTypeString }}</p>
                        <p>证件号码:{{ item.certificatesNo }}</p>
                        <p>用户性别:{{ item.sex == 0 ? "女生" : "男士" }}</p>
                        <p>出生日期：{{ item.birthdate }}</p>
                        <p>手机号码：{{ item.phone }}</p>
                        <p>婚姻状况:{{ item.isMarry == 0 ? "未婚" : "已婚" }}</p>
                        <p>当前住址{{ item.param.cityString }}</p>
                        <p>详细地址：{{ item.param.fullAddress }}</p>
                        <!-- 已选择盒子 -->
                        <transition name="confirm">
                            <div class="selected" v-if="index == peo">
                                已选择
                            </div>
                        </transition>

                    </div>

                </el-card>
            </div>

        </el-card>
    </div>
    <!-- 下面 -->
    <div class="bottom_card">
        <el-card style="max-width: 100%">

            <template #header>
                <div class="card-header">
                    <span>挂号信息</span>
                </div>
            </template>

            <el-descriptions class="margin-top" :column="2" border>
                <el-descriptions-item>

                    <template #label>
                        <div class="cell-item">
                            就诊日期：
                        </div>
                    </template>
                    {{ saveDoc?.workDate }}
                </el-descriptions-item>
                <el-descriptions-item>

                    <template #label>
                        <div class="cell-item">
                            就诊医院
                        </div>
                    </template>
                    {{ saveDoc?.param.hosname }}
                </el-descriptions-item>
                <el-descriptions-item>

                    <template #label>
                        <div class="cell-item">
                            就诊科室
                        </div>
                    </template>
                    {{ saveDoc?.param.depname }}
                </el-descriptions-item>
                <el-descriptions-item>

                    <template #label>
                        <div class="cell-item">
                            医生姓名
                        </div>
                    </template>
                    {{ saveDoc?.docname }}
                </el-descriptions-item>
                <el-descriptions-item>

                    <template #label>
                        <div class="cell-item">
                            医生职称
                        </div>
                    </template>
                    {{ saveDoc?.title }}
                </el-descriptions-item>
                <el-descriptions-item>

                    <template #label>
                        <div class="cell-item">
                            医生专长
                        </div>
                    </template>
                    {{ saveDoc?.skill }}
                </el-descriptions-item>
                <el-descriptions-item>

                    <template #label>
                        <div class="cell-item">
                            医生服务费
                        </div>
                    </template>
                    {{ saveDoc?.amount }}
                </el-descriptions-item>
            </el-descriptions>
        </el-card>

        <div class="btn">
            <el-button type="primary" @click="goMember()" :disabled="peo == -1">确认挂号</el-button>
        </div>

    </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import type { UserResponseData, UserArr, dutyDoc, doc } from '@/api/hosDetail/type'
import { getPeopleInfo, getDocInfo } from '@/api/hosDetail/index'
import { postOrder } from '@/api/client/index'
import type { postOrderType } from '@/api/client/type'
import { useRoute, useRouter } from "vue-router"
import { ElMessage } from 'element-plus'

let $route = useRoute()
let $router = useRouter()

let scheduleId = $route.query.docId
let hoscode = $route.query.hoscode

// 存储就诊人信息
let saveInfo = ref<UserArr>()
// 存储医生信息
let saveDoc = ref<doc>()
// 存储被选择的人
let peo = ref<number>(-1)
// peopleId
let peopleId = ref<number>()
// 订单id
let orderId = ref<string>('')

// 获取就诊人信息
const getInfo = async () => {
    let result: UserResponseData = await getPeopleInfo();
    saveInfo.value = result.data
}
// 获取值班医生信息
const getDutyDoc = async () => {

    let result: dutyDoc = await getDocInfo(scheduleId as string)

    if (result.code == 200) {
        saveDoc.value = result.data
    } else {
        return Promise.reject(new Error('获取医生信息失败'))
    }
}
// 存储
const savePeo = (item: any, index: number) => {
    peopleId.value = item.id
    peo.value = index
}
// go memeber
const goMember = async () => {
    let result = await postOrder(hoscode as string, scheduleId as string, peopleId.value as number)
    console.log(result);
    if (result.code == 200) {
        orderId.value = result.data
        $router.push({
            path: '/user/order',
            query: { id: orderId.value }
        })
    } else {
        ElMessage({
            type: 'error',
            message: result.message
        })
    }
}

onMounted(async () => {
    await getInfo()
    await getDutyDoc()
})
</script>

<style lang="scss" scoped>
.top {
    margin-left: 20px;
    margin-top: 20px;

    .confirm {
        font-size: 30px;
        color: #7f7f7f
    }
}

.box_card {
    margin-left: 20px;
    margin-top: 20px;
    width: 100%;

    .card-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .cardBody {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;

        :deep(.el-card__header) {
            background-color: #7f7f7f;
        }

        :deep(.el-card__body) {
            display: flex;
        }

        .card-header {
            display: flex;

            .boxLeft {
                display: flex;

                .boxCon {
                    min-width: 20px;
                    min-height: 5px;
                    background-color: white;
                    font-size: 13px;
                    margin-bottom: 5px;
                }

                .boxName {
                    margin-left: 5px;
                }
            }
        }

        h1 {
            margin-top: 10px;
        }

        .bottom {
            position: relative;

            p {
                margin-top: 10px;
            }

            .selected {
                position: absolute;
                width: 200px;
                height: 200px;
                border: 1px dashed red;
                border-radius: 50%;
                top: 0;
                left: 10%;
                line-height: 200px;
                text-align: center;
                font-size: 20px;
                color: red;
                transform: rotate(40deg);
                opacity: 0.5;
            }

            .confirm-enter-from {
                transform: scale(1);
            }

            .confirm-enter-active {
                transition: all .5s;
            }

            .confirm-enter-to {
                transform: scale(1.2);
            }

        }


    }
}

.bottom_card {
    margin-left: 20px;
    margin-top: 20px;
    align-items: center;

    .btn {
        display: flex;
        justify-content: center;
        margin-top: 20px;
    }
}
</style>